<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="handleSelectOne" class="half-width">常见病症</el-menu-item>
      <el-menu-item index="2" @click="handleSelectTwo" class="half-width">常用药品</el-menu-item>
    </el-menu>
    <div v-if="isVisibleOne">
      <el-col :lg="4" :md="1" :sm="2" :xs="8" align="center" style="height: 550px">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <button v-for="(permission, index) in permissions"
                    :key="permission.catalogueId"
                    :class="['custom-button', permission.class, { 'clicked': clickedButtons.includes(index) }]"
                    @click="handleClick(permission)"
            >
              <span><i :class="permission.icon"></i>{{ permission.catalogueName }}</span> <br>
            </button>
          </div>
        </el-card>
      </el-col>
      <div class="app-container home" style="height: 550px">
        <el-row :gutter="20">
          <el-col :lg="4" :md="1" :sm="2" :xs="25" align="center">
            <el-card class="update-log">
              <div slot="header" class="clearfix">
                <button v-for="(drugName, index) in drugName" :key="drugName.drugId" :style="{ order: index }"
                        @click="drugButton(drugName)"
                >
                  {{ drugName.diseaseName }}
                </button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--    常用药品-->
    <div v-if="isVisibleTwo">
      <el-col :lg="4" :md="1" :sm="2" :xs="8" align="center" style="height: 550px">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <button v-for="(permission, index) in pharmacyName"
                    :key="permission.catalogueId"
                    :class="['custom-button', permission.class, { 'clicked': clickedButtons.includes(index) }]"
                    @click="handleClickTwo(permission)"
            >
              <span><i :class="permission.icon"></i>{{ permission.pharmacyName }}</span> <br>
            </button>
          </div>
        </el-card>
      </el-col>

      <div class="app-container home" style="height: 550px">
        <el-row :gutter="20">
          <el-col :lg="4" :md="1" :sm="2" :xs="25" align="center">
            <el-card class="update-log">
              <div slot="header" class="clearfix">
                <button v-for="(nameOne, indexTwo) in nameOne" :key="nameOne.drugId" :style="{ order: indexTwo }"
                        @click="drugButtonTwo(nameOne)"
                >
                  <img :src="nameOne.drugPic" style="height: 45px;width: 45px;"><br>
                  {{ nameOne.drugName }}
                </button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  queryCatalogueName,
  queryDiseaseNameByCatalogueId,
  queryDrugByPharmacyId,
  queryPharmacyName
} from '@/api/mine/mine'

export default {
  name: 'Index',
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      activeIndex: '',
      isVisibleOne: true,
      isVisibleTwo: false,
      clickedButtons: [],
      one: 1,
      oneOne: '',
      drugName: [],
      nameOne: [],
      nameTwo: [],
      drugNameTwo: [],
      permissions: [{
        class: 'primary',
        icon: 'fas fa-user'
      }],
      pharmacyName: [{
        class: 'primary',
        icon: 'fas fa-user'
      }]

    }

  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {

    handleClickTwo(permission) {
      //console.log(permission)
      const index = this.permissions.findIndex(item => item.catalogueId === permission.catalogueId)
      if (index > -1) {
        if (!this.clickedButtons.includes(indexTwo)) {
          this.clickedButtons.push(indexTwo) // 添加索引到 clickedButtons 数组
        } else {
          this.clickedButtons.splice(this.clickedButtons.indexOf(indexTwo), 1) // 从 clickedButtons 数组中移除索引
        }
      }
      //console.log(permission.pharmacyId)
      queryDrugByPharmacyId(permission.pharmacyId).then(res => {
        //console.log(res)
        this.nameOne = res.data
        this.nameOne.forEach(item => {
          this.nameTwo.push(item.drugName, item.drugId, item.drugPic)
        })
        //console.log(this.nameTwo)
      })
    },
    queryPharmacyName() {
      queryPharmacyName().then(res => {
        //console.log(res)
        this.pharmacyName = res.data
      })
    },
    handleSelect(key, keyPath) {
      //console.log(key, keyPath)
    },

    handleSelectOne() {
      this.isVisibleOne = true
      this.isVisibleTwo = false
    },
    drugButton(drugName) {
      //console.log(drugName)
      this.$router.push({ path: '/mine/diseaseInfo', query: { drugName: drugName } })
    },
    drugButtonTwo(nameOne) {
      //console.log(nameOne)
      this.$router.push({ path: '/mine/drugInfo', query: { drugName: nameOne } })
    },
    queryDrugByPharmacyId() {
      this.oneOne = 1
      //console.log(this.oneOne)
      queryDrugByPharmacyId(this.oneOne).then(res => {
        //console.log(res)
        this.nameOne = res.data
        this.nameOne.forEach(item => {
          this.nameTwo.push(item.drugName, item.drugId)
        })
        //console.log(this.drugNameTwo)
      })
    },
    queryDiseaseNameByCatalogueId(one) {
      //console.log(one)
      queryDiseaseNameByCatalogueId(one).then(res => {
        //console.log(res)
        this.drugName = res.data
        this.drugName.forEach(item => {
          this.drugNameTwo.push(item.drugName, item.drugId)
        })
        //console.log(this.drugNameTwo)
      })
    },
    handleClick(permission) {
      const index = this.permissions.findIndex(item => item.catalogueId === permission.catalogueId)
      if (index > -1) {
        if (!this.clickedButtons.includes(index)) {
          this.clickedButtons.push(index) // 添加索引到 clickedButtons 数组
        } else {
          this.clickedButtons.splice(this.clickedButtons.indexOf(index), 1) // 从 clickedButtons 数组中移除索引
        }
      }
      //console.log(permission.catalogueId)
      queryDiseaseNameByCatalogueId(permission.catalogueId).then(res => {
        //console.log(res)
        this.drugName = res.data
        this.drugName.forEach(item => {
          this.drugNameTwo.push(item.diseaseName, item.drugId)
        })
        //console.log(this.drugNameTwo)
      })
    },
    queryCatalogueName() {
      queryCatalogueName().then(res => {
        //console.log(res)
        this.permissions = res.data
      })
    },
    handleSelectTwo() {
      this.isVisibleOne = false
      this.isVisibleTwo = true
      this.queryDrugByPharmacyId()
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    //console.log(this.$route.query.activeIndex)
    if (this.$route.query.activeIndex === '2') {
      this.handleSelectTwo()
    }
    this.queryCatalogueName()
    this.queryDiseaseNameByCatalogueId(this.one)
    this.queryPharmacyName()

  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
}

.half-width {
  width: 50%;
}

.drug-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  margin: 2px;
  padding: 3px 3px;
  border: none;
  border-radius: 3px;
  background-color: #78B9FC;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

button:hover {
  background-color: #0D84FF;
}

.custom-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0DBAFF;
  border: none;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all .3s ease-in-out;
  height: 50px;
  width: 100px;
  margin: 10px;
}

.custom-button.primary {
  background-color: #3498db;
}

.custom-button.secondary {
  background-color: #2ecc71;
}

.custom-button:hover {
  opacity: 0.8;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 20px;
    }
  }
}
</style>

